<template>
	<view class="cell-item bg-white" :class="{'column':type == 'textarea' || type == 'file' ,'mt-20':mt,'bbc':bbc}">
		<view class="label " :class="{'required':required,'file-header':type=='file'}">
			<text>{{label}}</text>
			<view class="upload-img" @click="onShowPopupFile" v-if="type=='file' && !isDisplay">
				<image style="width: 34rpx;height: 34rpx;" src="../../static/upload.png"></image>
			</view>
		</view>
		<view class="value" v-if="type == 'textarea'">
			<view class="textarea-box">
				<u--textarea maxlength="50" @input="input" :height="height" placeholder-style="color:#C8CCD9;"
					:placeholder="placeholder" :count="count" border="none"></u--textarea>
			</view>
		</view>
		<view class="value" @click="onChange" v-else-if="type=='sel'">
			<text v-if="value">{{selTips}}</text>
			<text class="color-grey" v-else>请选择</text>
			<image class="cell-right-icon" src="@/static/mine/icon_right.png" mode=""></image>
		</view>
		<view class="value file-value" v-else-if="type=='file'">
			<l-show-file :option="option" v-if="isDisplay" ref="showFile" :fileList="value"></l-show-file>
			<l-upload-file v-else ref="uploadFile" v-model="value" @change="updateFile"></l-upload-file>
			<!-- <view class="" style="margin-top: 20rpx;width: 100%;">
				<u-upload width="120" height="120" :fileList="fileList" @afterRead="afterRead" @delete="deletePic" name="1"
					multiple :maxCount="10">
				</u-upload>
			</view> -->
		</view>

	</view>
</template>

<script>
	import LUploadFile from './l-upload-file.vue'
	import LShowFile from './l-show-file.vue'
	export default {
		components: {
			LUploadFile,
			LShowFile
		},
		props: {
			option: {
				default: {
					id: 'fileId',
					size: 'fileSize',
					name: 'fileName'
				},
				type: Object
			},
			// 是否显示
			isDisplay: {
				default: false,
				type: Boolean
			},
			// label
			label: {
				default: "",
				type: String
			},
			// textarea 的时候有个count
			count: {
				default: false,
				type: Boolean
			},
			//是否必填
			required: {
				default: false,
				type: Boolean
			},
			mt: {
				default: false,
				type: Boolean
			},
			bbc: {
				default: false,
				type: Boolean
			},
			type: {
				default: "text",
				type: String
			},
			placeholder: {
				default: "请输入",
				type: String
			},
			// 输入的内容
			value: {
				default: '' | [],
				type: String | Array
			},
			selTips: {
				default: '',
				type: String
			},
			height: {
				default: 200,
				type: Number
			}

		},
		data() {
			return {
				popupShow: false,
				fileList: []
			}
		},
		watch: {
			value(val) {
				console.log(typeof(val))
			}
		},
		methods: {
			ruleFile() {
				return this.$refs.uploadFile.ruleFile()
			},
			onShowPopupFile() {
				this.$refs.uploadFile.fnShowPopupFile()
			},
			updateFile(e) {
				this.$emit('input', e)
			},
			input(e) {
				this.$emit('input', e)
			},
			// 删除图片
			deletePic(event) {
				this.fileList.splice(event.index, 1)
			},
			onChange() {
				this.$emit('change')
			},
			// 上传图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)

				let fileListLen = this[`fileList`].length
				lists.map((item) => {
					this[`fileList`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					let result = await this.$Net.upload(lists[i].url)
					let status = 'error'
					if (!result.success) {
						this.fileList.splice(i, 1)
						this.$Msg.Toast('上传失败:' + result.message)
						return
					}
					let item = this[`fileList`][fileListLen]
					this[`fileList`].splice(fileListLen, 1, Object.assign(item, {
						status: "success",
						message: '',
						url: result.body
					}))
					fileListLen++
				}
				this.$emit('input', this.fileList)

			},
		}
	}
</script>
<style scoped lang="scss">
	.cell-item {
		width: 100%;
		// height: 104rpx;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 32rpx;

		.label {
			font-size: 34rpx;
			color: $uni-text-color;
		}

		.file-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
		}

		.required {
			&::before {
				content: "*";
				color: #FE5B5A;
				margin-left: -16rpx;
			}
		}

		.value {
			display: flex;
			align-items: center;
			flex: 1;
			justify-content: flex-end;

			::v-deep .textarea-box {
				width: calc(100vw - 64rpx);
				margin-left: -9px;

				textarea {
					font-size: 34rpx !important;
					width: 100%;
					padding-left: 0;
				}
			}

			::v-deep .u-textarea {
				padding: 0 !important;
			}

		}

		.file-value {
			width: 100%;
		}
	}

	.column {
		flex-direction: column;
		align-items: baseline;
	}
</style>
